<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<title>Wap 电商平台</title>
	<meta charset="UTF-8">
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name=viewport>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.6/dist/nutui.min.css">
	<!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <!-- 引入NutUI组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.6/dist/nutui.min.js"></script>
    <!-- jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    
	<link rel="stylesheet" href="./global.css">
</html>
<body>
	<div id="app" class="add-order-container" >
		
		<nut-navbar :back-show="false" :right-show="false" class="demo-nav" title="提交订单"  @on-click-back="back" ></nut-navbar>
		
		<nut-row style="width:100%;padding:10px 5px;background:white;">
			<nut-col :span="6">
				<div style="line-height:40px;">收货地址</div>
			</nut-col>
			<nut-col :span="18">
				<div style="line-height:40px;">四川省成都市青羊区四川国际大厦</div>
			</nut-col>
		</nut-row>
		
		<column class="order-warp" style="padding: 10px 10px;">
			<div class="order-title" >店铺名称:东家得猫粮铺子 </div>
			<row>
				<nut-avatar style="height:80px;width:80px; " bg-image="https://nutui.jd.com/3x/img/cell-avatar.jpeg"  bg-icon></nut-avatar>
				<column>
					<div>【Html Css Java 标准课件】商品名称，差不得内容</div>
					<nut-row style="width:100%;">
						<nut-col :span="12">
							<nut-price  :price="39.10" :needSymbol="true"  :thousands="false" style="color:#e1251b;" />
						</nut-col>
						<nut-col :span="6" style="text">
							<div></div>
							<!-- 添加商品数量  -->
						</nut-col>
					</nut-row>
				</column>
			</row>
			
			<nut-row style="width:100%;padding:10px 0px;">
				<nut-col :span="18">
					<div>配送</div>
				</nut-col>
				<nut-col :span="6" style="text-align:right;">
					快递运输
				</nut-col>
			</nut-row>
			
			<nut-row style="width:100%;padding-top:10px;">
				<nut-col :span="6">
					<div style="line-height:40px;">留言</div>
				</nut-col>
				<nut-col :span="18">
					<nut-textinput v-model="name" name="name" style="width:100%;margin-bottom:15px;" placeholder="留言内容" :clearBtn="true" :disabled="false"></nut-textinput>
				</nut-col>
			</nut-row>
		</column>
		
		<column style="background:white;padding:10px;" class="order-price-warp">
			<nut-row style="width:100%;padding:10px 0px;">
				<nut-col :span="18">
					<div>商品金额</div>
				</nut-col>
				<nut-col :span="6" style="text-align:right;">
					<nut-price  
				    :price="11.30" 
				    :needSymbol="true" 
				    :thousands="false"
				    style="color:#e1251b;"
				/>
				</nut-col>
			</nut-row>
			<nut-row style="width:100%;padding:10px 0px;">
				<nut-col :span="18">
					<div>运费</div>
				</nut-col>
				<nut-col :span="6" style="text-align:right;">
					<nut-price  
				    :price="0.00" 
				    :needSymbol="true" 
				    :thousands="false"
				    style="color:#e1251b;"
				/>
				</nut-col>
			</nut-row>
			<nut-row style="width:100%;padding:10px 0px;">
				<nut-col :span="18">
					<div>优惠券</div>
				</nut-col>
				<nut-col :span="6">
					<div style="text-align:right;">无可用</div>
				</nut-col>
			</nut-row>
			<div style="padding:10px 0px;text-align: right;width:100%;">
				合计:<nut-price  :price="0.00" :needSymbol="true" :thousands="false" style="color:#e1251b;" />
			</div>
		</column>
		
		<nut-row style="position:absolute;bottom:0px;background:white;padding:10px;width:100%;box-sizing:border-box;">
			 <nut-col :span="15">
				<div class="total-price">
				<nut-price  
				    :price="39.10" 
				    :needSymbol="true" 
				    :thousands="false"
				    style="color:#e1251b;"
				/>
				</div>
			 </nut-col>
			 <nut-col :span="9">
				<nut-button  block shape="circle" @click="submit" style="margin-right:10px;padding:0px 30px;">提交订单</nut-button>
			 </nut-col>
		</nut-row>
		
	</div>
	<script type="text/javascript">
		new Vue({
			el: '#app',
            data() {
				return {
			      	name:"",
			      	pwd:""
				}
			},
			created: function(){
				
			},
			methods: {
				submit:function(){
					
				},
				back: function() {
					
				}
			}
		});
	</script>
</body>